<template>
  <div>
    <HeaderTop>
      <!-- Swiper -->
      <div
        class="swiper"
        slot="left"
      >
        <div
          class="swiper-container"
          id="swiper-container1"
        >
          <div class="swiper-wrapper">
            <div class="swiper-slide active-slider">
              <p>精选</p>
            </div>
            <div class="swiper-slide">
              <p>VIP福利社</p>
            </div>
            <div class="swiper-slide">
              <p>电影</p>
            </div>
            <div class="swiper-slide">
              <p>电视剧</p>
            </div>
            <div class="swiper-slide">
              <p>动漫</p>
            </div>
            <div class="swiper-slide">
              <p>小说</p>
            </div>
            <div class="swiper-slide">
              <p>综艺</p>
            </div>
            <div class="swiper-slide">
              <p>知识</p>
            </div>
          </div>
        </div>

      </div>
      <span
        class="header_search"
        slot="right"
      >
        <router-link to="/search">
          <i class="icon icon-search"></i>
        </router-link>
      </span>
    </HeaderTop>
    <!-- 轮播 -->
    <div id="lunbo">
      <div
        class="swiper-container"
        id="swiper-container2"
      >
        <div class="swiper-wrapper">
          <div class="swiper-slide img"><img
              src="./images/1.png"
              alt=""
            ></div>
          <div class="swiper-slide img"><img
              src="./images/2.png"
              alt=""
            > </div>
          <div class="swiper-slide img"><img
              src="./images/3.png"
              alt=""
            > </div>
          <div class="swiper-slide img"><img
              src="./images/4.png"
              alt=""
            > </div>
          <div class="swiper-slide img"><img
              src="./images/5.png"
              alt=""
            > </div>
        </div>
        <!-- 导航条-->
        <div class="swiper-pagination2"></div>
      </div>
    </div>
    <div id="tv">
      <div class="title">
        <p><strong>今日专属推荐</strong></p>
        <p>来部好片放松自己，cheer！</p>
      </div>
      <div
        id="time1"
        v-show="time1Style"
      >
        <i class="iconfont icon-taiyang"></i>
      </div>
      <div
        id="time2"
        v-show="time2Style"
      >
        <i class="iconfont icon-yueliang"></i>
      </div>
    </div>
    <!-- 正在热播 -->
    <div id="hot_broadcast">
      <h3>正在热播</h3>
      <div
        v-for="(item,index) in imgSrc"
        :key="index"
        class="hot_broadcast_content"
      >
        <img
          :src="item.src"
          alt=""
        >
        <h4>{{item.msgTitle | msgHeart}}</h4>
        <h6>{{item.msg}}</h6>
        <span
          class="heart"
          :class="{redStyle:item.on}"
          @click="item.on=!item.on"
        >
          <i class="icon icon-heart"></i>
        </span>
      </div>
      <span class="exchange">
        <p><i class="icon icon-undo"></i>换一换</p>
      </span>
    </div>
    <!-- 猜你喜欢的标签 -->
    <div id="tag">
      <h3>猜你喜欢的标签</h3>
      <div
        v-for="(item,index) in tags"
        :key="index"
        class="tag_content"
      ># {{item.content}}
      </div>
      <span class="exchange">
        <p><i class="icon icon-undo"></i>换一换</p>
      </span>
    </div>
    <!-- 其他 -->
    <div id="qita"></div>
  </div>
</template>

<script>
import HeaderTop from '../../components/HeaderTop/HeaderTop.vue'
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
export default {
  data () {
    return {
      time1Style: 'true',
      time2Style: '',
      tags: [
        { content: '实力唱将' },
        { content: '中式菜系' },
        { content: '欢喜冤家' },
        { content: '宿舍趣事' },
        { content: '召唤师' },
        { content: '人文' }
      ],
      imgSrc: [
        // 动态绑定需要加require
        {
          src: require('./images/6.png'),
          msgTitle: '致命丛林·首播',
          msg: '原始丛林惊现史前猛兽',
          on: false
        },
        {
          src: require('./images/7.png'),
          msgTitle: '观海策·两集连播',
          msg: '实力解封，凌霄大号登场',
          on: false
        },
        {
          src: require('./images/8.png'),
          msgTitle: '阿拉丁·真人神话',
          msg: '史密斯化身灯神无所不能',
          on: false
        },
        {
          src: require('./images/9.png'),
          msgTitle: '幸福触手可及是爱情',
          msg: '心动？宋苓打动周放',
          on: false
        }
      ]
    }
  },
  components: {
    HeaderTop
  },
  mounted () {
    // 创建一个swiper实例对象，来实现轮播
    new Swiper('#swiper-container1', {// eslint-disable-line
      watchSlidesProgress: true,
      watchSlidesVisibility: true,
      slidesPerView: 4
    })

    new Swiper('#swiper-container2', {// eslint-disable-line
      pagination: {
        el: '.swiper-pagination2',
        clickable: true,
        bulletActiveClass: 'my-bullet-active'
      },
      autoplay: {
        delay: 1500,
        disableOnInteraction: false
      },
      debugger: true,
      loop: true
    })
  },
  // 私有过滤器
  filters: {
    msgHeart (msg) {
      return msg.replace(/爱情/g, '♥♥')
    }
  }
}
</script>

<style >
.header_search {
  background: rgb(230, 227, 227);
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 11%;
  height: 90%;
  line-height: 45px;
  text-align: center;
  border-radius: 50%;
}
.header_search .icon {
  font-size: 25px;
  color: rgb(202, 199, 199);
}

/* swiper轮播  #swiper-container1*/
.swiper {
  width: 85%;
}
.swiper-container {
  width: 100%;
  height: 43px;
  margin-left: auto;
  margin-right: auto;
}

.swiper-slide {
  text-align: center;
  background: #fff;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.swiper-slide p {
  margin-top: 8px;
}
.swiper-slide p:hover {
  color: rgb(201, 199, 122);
  font-size: 15px;
}
/* swiper轮播  #swiper-container2*/
#lunbo {
  width: 100%;
}
#swiper-container2 {
  width: 100%;
  height: 100%;
  margin-top: 46px;
  margin-left: auto;
  margin-right: auto;
  background: white;
}
.img > img {
  width: 100%;
  height: 100%;
}
/*轮播小圆点放置左下角 */
.swiper-pagination2 {
  margin-left: 75%;
}
.swiper-pagination-bullet {
  width: 5px;
  height: 5px;
  background: rgb(100, 99, 99);
}
/* 分页器当前指示小点 */
.my-bullet-active {
  background: red;
  width: 15px;
  height: 5px;
  opacity: 1;
}

/*  tv专属推荐 */
#tv {
  width: 100%;
  margin-top: 10px;
  height: 60px;
}

.title {
  float: left;
  margin-left: 10px;
}

.title > p:nth-child(1) {
  font-size: 1.3em;
}

#time1 {
  float: right;
  margin-top: 10px;
  margin-right: 10px;
}
#time1 .iconfont {
  font-size: 36px;
  color: rgb(218, 218, 24);
}
#time2 {
  float: right;
  margin-top: 10px;
  margin-right: 10px;
}
#time2 .iconfont {
  font-size: 36px;
  color: rgb(218, 218, 24);
}
/* 正在热播 */
#hot_broadcast {
  width: 100%;
  padding: 5px;
  background: white;
  overflow: hidden;
}
#hot_broadcast h6 {
  letter-spacing: 1px;
}
#hot_broadcast .hot_broadcast_content {
  width: 49%;
  height: 100px;
  margin: 1px;
  margin-bottom: 60px;
  float: left;
}
.heart {
  float: right;
  margin-right: 10px;
  margin-top: -30px;
}
.redStyle {
  color: red;
}
/* 猜你喜欢的标签 */
#tag {
  width: 100%;
  padding: 5px;
  background: white;
  overflow: hidden;
}
#tag .tag_content {
  width: 30%;
  height: 35px;
  line-height: 35px;
  margin: 5px;
  text-align: center;
  float: left;
  border-radius: 10%;
}
#tag .tag_content:nth-child(2n) {
  background: rgb(238, 237, 237);
}
#tag .tag_content:nth-child(2n + 1) {
  background: rgb(248, 248, 161);
}
/* 其他 */
#qita {
  width: 100%;
  height: 200px;
}

/* 换一换 */
.exchange {
  width: 100%;
  margin-top: 10px;
  text-align: center;
}
.exchange p {
  line-height: 45px;
}
.exchange .icon {
  margin-right: 5px;
  color: rgb(248, 245, 88);
}
</style>
